@charset "utf-8";
@import 'reset';
$fontSize:40;
@function r($p) {
    @return $p/$fontSize*1rem;
}

html {
    font-size: $fontSize*1px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body{
    font-size: 16px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.webWarp{
    height: 100%;
    position: relative;
    overflow: auto;
}
.web {
    width: r(640);
    position: absolute;
    left: 0;
    top: 0;
    top: 0;
    bottom:r(20);
    overflow: auto;
    header {
        .nav {
            width: r(640);
            height: r(75);
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: space-around;
            li {
                position: relative;
                width: r(113);
                display: flex;
                align-items: center;
                justify-content: center;
            }
            li::after {
                position: absolute;
                left: 0;
                bottom: - r(19);
                content: "";
                width: 100%;
                height: r(3);
                background: #000000;
                display: none;
            }
            li:hover::after {
                display: block;
            }
            .active::after{
                display: block;
            }
            a {
                display: flex;
                align-items: center;
            }
            img {
                height: r(37);
            }
        }
        .banner {
            width: r(640);
            height: r(300);
            position: relative;
            overflow: hidden;
            img {
//              width: r(640);
                height: r(300);
                position: absolute;
                left: 0;
                top: 0;
                transform: translateX(0);
                transition: all .5s;
            }
            .circle_btn {
                position: absolute;
                width: r(116);
                display: flex;
                justify-content: space-around;
                left: 50%;
                right: 50%;
                bottom: r(16);
                transform: translate(-50%);
            }
            label {
                width: r(14);
                height: r(14);
                border-radius: 50%;
                background: #585858;
            }
            input{
                display: none;
            }
            #activea:checked~img{
                transform: translateX(0);
            }
            #activea:checked~.circle_btn>label:first-of-type{
                background: #FFFFFF;
            }
            #activeb:checked~img{
                transform: translateX(- r(640));
            }
            #activeb:checked~.circle_btn>label:nth-of-type(2){
                background: #FFFFFF;
            }
            #activec:checked~img{
                transform: translateX(- r(1280));
            }
            #activec:checked~.circle_btn>label:nth-of-type(3){
                background: #FFFFFF;
            }
            #actived:checked~img{
                transform: translateX(- r(1920));
            }
            #actived:checked~.circle_btn>label:nth-of-type(4){
                background: #FFFFFF;
            }
            #activee:checked~img{
                transform: translateX(- r(2560));
            }
            #activee:checked~.circle_btn>label:nth-of-type(5){
                background: #FFFFFF;
            }
            
        }
        .subnav {
            ul {
                width: r(640);
                height: r(146);
                background: #F2F2F2;
                display: flex;
                justify-content: space-around;
                li {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    a {
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        img{
                           width: r(90);
                        }
                    }
                }
            }
        }
    }
    .container{
        width: r(584);
        margin: r(14) auto r(90);
        height: calc(100%-100px);
        .h_title{
            display: flex;
            align-items: center;
            margin-bottom: r(13);
            img{
                width: r(29);
            }
            p{
                padding-left: r(11);
                font-size: r(24);
            }
        }
        .list{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: r(6);
            >img{
                width: r(150);
            }
            .text{
                width: r(420);
                border-bottom: 1px solid #a7a7a7;
                >.t_title{
                    font-size: r(21);
                    
                    margin-top: r(10);
                    a{
                        color: #000000;
                    }
                    a:hover{
                        color: #ef287c;
                    }
                }
                .t_text{
                    width: r(420);
                    display: flex;
                    justify-content: space-between;
                    font-size: r(19);
                    color:#8d8d8d;
                    margin-top: r(10);
                    img{
                        height: r(25);
                        align-items:flex-start;
                        color: #8D8D8D;
                    }
                }
                .p_icon{
                    ul{
                        width: r(266);
                        margin-top: r(10);
                        margin-bottom: r(8);
                        display: flex;
                        justify-content: space-between;
                        li{
                            display: flex;
                            align-items: center;
                            img{
                                width: r(24);
                            }
                            span{
                                font-size: r(16);
                                color: #8D8D8D;
                                padding-left: r(10);
                            }
                        }
                    }
                }
            }
        }
    }
}
    footer{
        width: 100%;
    .foot_nav{
        width: r(640);
        position: absolute;
        left:50%;
        bottom:0;
        height: r(100);
        background: rgba(255,255,255,1);
        transform: translate(-50%);
        ul{
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            li{
                display: flex;
                align-items: flex-end;
                a{
                    display: flex;
                    align-items: flex-end;  
                }
                img{
                    width:r(60);
                }
                .logo{
                    width: r(97);
                }
            }
            
            
        }
    }
}

@keyframes name{
     0%{-webkit-transform:scale(0);opacity: 0;height: 0;}
    5%{-webkit-transform:scale(0.5);opacity: 0.5;height: 50%;}
    30%{-webkit-transform:scale(1);opacity: 0.8;height: 100%;}
    75%{-webkit-transform:scale(1.2);opacity: 0.8;height: 100%;}
    100%{-webkit-transform:scale(1);opacity: 1;height: 100%;}
}
#popup{
    display: none;
}
#popup:checked+.popup_none{
//  transform: scale(1);
//  height: 100%;
    animation: name .5s ease-out forwards;
}
#popup:checked+.popup_none .popup_con{
    
}

.popup_none{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0;
    overflow: hidden;
//  transform: scale(0);
//  transition:all .2s ease-out;
//  animation: ;
}
.popup_con{
    width: r(640);
    height: 100%;
    background: #7F7F7F;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    .t_title{
        width: r(492);
//      margin-top: r(200);
        margin-bottom: r(100);
        img{
            width: r(492);
            height: r(95);
        }
    }
    .btn_ico{
        width: r(640);
//      margin: 0 auto;
        ul{
            width: r(640);
            margin:0 auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            li{
                width:r(200);
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
                margin-bottom: r(43);
                .img{
                    width: r(126);
                    height: r(126);
                    border:1px solid #FFFFFF;
                    border-radius:50% ;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img{
                    width: r(68);
                }
                }
                
                p{
                    width: r(200);
                    text-align: center;
                    font-size: r(24);
                    color: #FFFFFF;
                    padding-top: r(17);
                }
                
            }
        }
    }
    .close_btn{
        width: r(55);
//      margin-top:r(100) ;
        img{
            width: r(55);
        }
    }
}


